<template>
	<app-layout>
		<template v-if="loading">
			<view class="app-search" v-if="search_bool">
				<app-search-for></app-search-for>
			</view>

			<!-- 样式五 -->
			<view class="margin-fixed">
				<styleFive :goods_list="goods_list" :menu='list' @setActive='setActive' :activeIndex='activeIndex'>
				</styleFive>
			</view>
		</template>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import styleFive from './style-five.vue';
	import appSearchFor from '../../components/page-component/app-search-for/app-search-for.vue';

	export default {
		components: {
			'app-search-for': appSearchFor,
			styleFive,
		},
		data() {
			return {
				id: 0,
				search_bool: true,
				list: [],
				goods: [],
				request: true,
				page: 1,
				classId: 0,
				activeIndex: 0,
				activeIndexTwo: 0,
				over: false,
				scrollHeight: 0,
				tabbarbool: true,
				cat_id: 0,
				cat_ids: [],
				againLower: true,

				goods_list: [],
				page_count: 1,

				select_cat_id: 0,
				first_id: 0,
				loading: false,

				selectAttr: {},
				previewUrl: '',
				submitUrl: '',
				show: 0,
				attrGroup: [],
				item: {},
				is_over_goods: true,
				options: {},
				goodsLoading: false,
				childId: 0
			}
		},
		computed: {
			...mapGetters('mallConfig', {
				cat_style: 'getCatStyle',
				getTheme: 'getTheme'
			}),
			...mapState('gConfig', {
				windowHeight: state => state.systemInfo.windowHeight,
				windowWidth: state => state.systemInfo.windowWidth
			}),
			...mapGetters('iPhoneX', {
				botHeight: 'getBotHeight'
			}),
			...mapState('mallConfig', {
				mall: state => state.mall,
			}),
			setHeight() {
				let bottom = 0;
				if (this.tabbarbool) {
					bottom = this.botHeight;
				}
				return (this.windowHeight * (750 / this.windowWidth)) - bottom - 88;
			}
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++;
				this.$request({
					url: this.$api.default.goods_list,
					method: 'get',
					data: {
						page: this.page,
						cat_id: this.list[this.activeIndex].id,
					}
				}).then(res => {
					if (res.code === 0) {
						this.goods_list.push(...res.data.list);
					}
				});
			}
		},
		methods: {
			setActive(index) {
				this.activeIndex = index
				this.getList()
			},
			onAttr(data) {
				this.selectAttr = data;
			},
			attr({
				previewUrl,
				submitUrl,
				attr_groups,
				goods
			}) {
				this.previewUrl = previewUrl;
				this.submitUrl = submitUrl;
				this.attrGroup = attr_groups;
				this.item = goods;
				this.show = Math.random();
			},
			route_advert(data) {
				routeJump({
					open_type: data.advert_open_type,
					params: data.advert_params,
					page_url: data.advert_url
				});
			},
			// 点击导航栏
			active(item) {
				console.log(item)
				this.page = 1;
				this.goods_list = [];
				this.cat_id = item.id;
				this.select_cat_id = item.id;
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].active = false;
				}
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].id === item.id) {
						this.list[i].active = true;
					}
				}
				this.is_over_goods = false;
				this.$request({
					url: `${this.$api.default.goods_list}&page=${this.page}&cat_id=${item.id}`
				}).then(res => {
					if (res.code === 0) {
						this.goods_list.push(...res.data.list);
						this.page_count = res.data.pagination.page_count;
						this.goodsLoading = this.page_count > 1;
						this.is_over_goods = true;
					}
				});
			},
			// 下拉分页请求
			req() {
				this.$request({
					url: `${this.$api.default.goods_list}&page=${this.page}&cat_id=${this.classId}`
				}).then(response => {
					if (response.data.list.length > 0) {
						this.goods.push(...response.data.list);
					} else {
						this.over = true;
					}
				});
			},
			activeOne(item) {
				console.log(1)
				this.page = 1;
				this.activeIndexTwo = 0;
				this.cat_id = item.id;
				this.select_cat_id = item.id;
				this.is_over_goods = false;
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].active !== item.active) {
						this.list[i].active = false;
					}
				}
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].id === item.id) {
						this.list[i].active = true;
						this.activeIndex = i;
					}
				}
				if (this.cat_style.cat_style === '5') this.goods_list = [];

				if (this.list[this.activeIndex].child.length === 0) {
					this.$request({
						url: `${this.$api.default.goods_list}&page=${this.page}&cat_id=${item.id}`
					}).then(res => {
						let {
							list,
							pagination
						} = res.data;
						this.goods_list = list;
						this.is_over_goods = true;
						this.page = 1;
						this.cat_id = item.id;
						this.select_cat_id = item.id;
						this.page_count = pagination.page_count;
					});

				} else {
					this.$request({
						url: `${this.$api.default.goods_list}&page=${this.page}&cat_id=${this.list[this.activeIndex].child[0].id}`
					}).then(res => {
						let {
							list,
							pagination
						} = res.data;
						this.goods_list = list;
						this.is_over_goods = true;
						this.page = 1;
						this.cat_id = this.list[this.activeIndex].child[0].id;
						this.select_cat_id = item.id;
						this.page_count = pagination.page_count;
					});
				}
			},
			async activeTwo({
				item,
				index
			}) {

				this.page = 1;
				this.activeIndexTwo = index;
				this.select_cat_id = item.id;
				this.cat_id = item.id;
				this.select_cat_id = item.id;
				this.is_over_goods = false;
				const res = await this.$request({
					url: this.$api.default.goods_list,
					method: 'get',
					data: {
						page: 1,
						cat_id: item.id
					}
				});
				if (res.code === 0) {
					let {
						list,
						pagination
					} = res.data;
					this.goods_list = [];
					this.goods_list = list;
					this.is_over_goods = true;
					this.page_count = pagination.page_count;
				}
			},
			activeThree(item) {
				this.cat_id = item.id;
				this.select_cat_id = item.id;
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].active !== item.active) {
						this.list[i].active = false;
					}
					if (this.list[i].id === item.id) {
						this.list[i].active = true;
						this.activeIndex = i;
					}
				}
			},

			async catLower() {
				if (!this.againLower) return;
				this.againLower = false;
				let goods_list = this.goods_list[this.goods_list.length - 1];
				const res = await this.$request({
					url: this.$api.default.cat_goods,
					method: 'get',
					data: {
						cat_ids: JSON.stringify(this.cat_ids),
						cat_id: goods_list.id,
						offset: goods_list.offset
					}
				});
				if (res.code === 0) {
					if (res.data.list[0].id === goods_list.id && res.data.list[0].goods_list.length > 0) {
						this.goods_list[this.goods_list.length - 1].goods_list.push(...res.data.list[0].goods_list);
						this.goods_list[this.goods_list.length - 1].offset = res.data.list[0].offset;
					}
					for (let i = 1; i < res.data.list.length; i++) {
						this.goods_list.push(res.data.list[i]);
					}
					this.againLower = true;
				}
			},

			activeRequest(data) {
				console.log(3)
				this.goods_list = [];
				if (data.child.length !== 0) {
					this.requestCatList({
						item: data.child[0],
						index: 0
					});
				}
			},

			async requestCatList({
				item,
				index
			}) {
				this.page = 1;
				this.cat_id = item.id;
				this.select_cat_id = item.id;
				this.activeIndexTwo = index;
				this.goods_list = [];
				if (item.child.length !== 0) {
					this.is_over_goods = false;
					this.cat_ids = [];
					for (let i = 0; i < item.child.length; i++) {
						this.cat_ids.push(item.child[i].id);
					}
					const res = await this.$request({
						url: this.$api.default.cat_goods,
						method: 'get',
						data: {
							cat_ids: JSON.stringify(this.cat_ids),
							cat_id: item.child[0].id,
							offset: 0
						}
					});
					if (res.code === 0) {
						this.is_over_goods = true;
						this.goods_list = res.data.list;
					}
				}
			},
			// 求情商品列表
			async requestGoods({
				item,
				index
			}) {
				console.log(5)
				this.page = 1;
				this.cat_id = item.id;
				this.select_cat_id = item.id;
				this.goods_list = [];

				this.is_over_goods = false;
				if (this.cat_style.cat_style === '10' && index !== undefined && this.list[index].child.length !== 0) {
					this.activeIndexTwo = 0;
					this.cat_id = this.list[index].child[0].id;
				}
				const res = await this.$request({
					url: this.$api.default.goods_list,
					method: 'get',
					data: {
						page: this.page,
						cat_id: this.cat_id
					}
				});
				if (res.code === 0) {
					this.is_over_goods = true;
					this.goods_list = res.data.list;
					this.goodsLoading = true;
					this.page_count = res.data.pagination.page_count;
				}
			},

			// 分页请求商品
			async lower(data) {
				if (this.page < this.page_count) {
					this.page++;
					const res = await this.$request({
						url: this.$api.default.goods_list,
						method: 'get',
						data: {
							page: this.page,
							cat_id: data.id
						}
					});
					if (res.code === 0) {
						this.goods_list.push(...res.data.list);
					}
				} else {
					uni.showToast({
						title: '暂无更多商品',
						icon: 'none'
					})
				}
			},

			// 处理数据
			dataProcessing(list) {
				for (let i = 0; i < list.length; i += 2) {
					if (i + 1 !== list.length) {
						this.goods_list.push([list[i], list[i + 1]]);
					} else {
						this.goods_list.push([list[i]]);
					}
				}
			},

			async requestCat(cat_id, select_cat_id) {
				this.loading = false;
				const res = await this.$request({
					url: this.$api.default.cat_list,
					method: 'get',
					data: {
						cat_id: cat_id ? cat_id : '',
						select_cat_id: select_cat_id ? select_cat_id : ''
					}
				});
				if (res.code === 0) {
					res.data.list.unshift({
						id: this.cat_id,
						name: '全部'
					})
					this.list = res.data.list;
					this.getList()
				}
			},
			async getList() {
				const res = await this.$request({
					url: this.$api.default.goods_list,
					method: 'get',
					data: {
						page: 1,
						cat_id: this.list[this.activeIndex].id,
					}
				});
				if (res.code === 0) {
					this.goods_list = res.data.list;
					this.page = 1
					this.page_count = res.data.pagination.page_count;
				}
			},
		},

		onLoad(options) {
			this.id = options['options.cat_id']
			setTimeout(() => {
				this.tabbarbool = this.$children[0].tabbarbool;
			}, 500);
			this.cat_id = options['options.cat_id'];
			this.first_id = options['options.cat_id'];
			if (options.first_id && options.select_cat_id) {
				console.log(1)
				this.requestCat(options.first_id, options.select_cat_id).then(() => {
					this.loading = true;
				});
			} else if (!options.first_id && options.select_cat_id) {
				// console.log(2)
				this.requestCat('', options.select_cat_id).then(() => {
					this.loading = true;
				});
			} else if (!options.first_id && !options.select_cat_id) {
				console.log(this.cat_id)
				this.requestCat(this.cat_id).then(() => {
					this.loading = true;
				});
			}
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif
		},
		// #ifdef MP
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/cats/cats',
				title: this.$children[0].navigationBarTitle,
				params: {
					cat_id: this.first_id,
					first_id: this.first_id,
					select_cat_id: this.select_cat_id
				}
			});
		},
		// #endif
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			let {
				setting,
				name
			} = this.mall.setting;
			return this.$shareTimeline({
				title: setting.share_title ? setting.share_title : name,
				query: {
					cat_id: this.first_id,
					first_id: this.first_id,
					select_cat_id: this.select_cat_id
				}
			});
		},
		// #endif
	}
</script>

<style lang="scss" scoped>
	.app-search {
		// position: fixed;
		top: 0;
		left: 0;
		z-index: 1500;
	}

	.empty-search {
		height: #{88upx};
		width: #{750upx};
		background: #f7f7f7;
	}

	.margin-fixed {
		background-color: #fff;
	}

	.app-top {
		width: $screen-width;
	}
</style>